<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>购物车页面</title>

    <link href="css/Lobibox.min.css" rel="stylesheet">
    <link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="css/cartstyle.css" rel="stylesheet" type="text/css"/>
    <link href="css/optstyle.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="js/Lobibox.js"></script>
    <script type="text/javascript" src="js/shopcart.js"></script>

    <script src="js/vue.js"></script>

    <!--自定义工具-->
    <script src="js/Data.js"></script>
    <script src="js/HttpUtil.js"></script>


</head>

<body>

<!--顶部导航条 -->
<div class="am-container header">
    <ul class="message-l">
        <div class="topMessage">
            <div class="menu-hd" id="AA">
                <a href="login.html" target="_top" class="h" id="a1">亲，请登录</a>
                <a href="register.html" target="_top" id="a2">免费注册</a>
            </div>
        </div>
    </ul>
    <ul class="message-r">
        <div class="topMessage home">
            <div class="menu-hd"><a href="home2.html" target="_top" class="h">商城首页</a></div>
        </div>
        <div class="topMessage my-shangcheng">
            <div class="menu-hd MyShangcheng"><a href="information.html" target="_top"><i
                    class="am-icon-user am-icon-fw"></i>个人中心</a></div>
        </div>
        <!--<div class="topMessage mini-cart">
            <div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
        </div>-->
        <div class="topMessage favorite">
            <div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>
            </div>
        </div>
        <div class="topMessage favorite">
            <div class="menu-hd"><a href="order.html" target="_top"><i class="am-icon-star am-icon-fw"></i><span>个人订单</span></a>
            </div>
        </div>
    </ul>
</div>
<!--悬浮搜索框-->
<div class="nav white">
    <div class="logo"><img src="images/logo.png"/></div>
    <div class="logoBig">
        <li><img src="images/logobig.png"/></li>
    </div>

    <div class="search-bar pr">
        <a name="index_none_header_sysc" href="#"></a>
        <form>
            <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
            <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="button">
        </form>
    </div>
</div>

<div class="clear"></div>

<!--购物车 -->
<div class="concent" id="shop_cart">
    <div id="cartTable">
        <div class="cart-table-th">
            <div class="wp">
                <div class="th th-chk">
                    <div id="J_SelectAll1" class="select-all J_SelectAll">

                    </div>
                </div>
                <div class="th th-item">
                    <div class="td-inner">商品信息</div>
                </div>
                <div class="th th-price">
                    <div class="td-inner">单价</div>
                </div>
                <div class="th th-amount">
                    <div class="td-inner">数量</div>
                </div>
                <div class="th th-sum">
                    <div class="td-inner">金额</div>
                </div>
                <div class="th th-op">
                    <div class="td-inner">操作</div>
                </div>
            </div>
        </div>
        <div class="clear"></div>

        <tr class="item-list">
            <div class="bundle  bundle-last ">
                <div class="bundle-hd">

                </div>

                <div class="bundle-main" v-for="(goods,index)  in goodsList">
                    <ul class="item-content clearfix">
                        <li class="td td-chk">
                            <div class="cart-checkbox ">
                                <input @click="selectGoods(goods)" id="1111111111" name="items[]" value="170037950254"
                                       :checked="goods.checked"
                                       :class="{'ico_gou_on':goods.checked}" type="checkbox">
                                <label for="1111111111"></label>
                            </div>
                        </li>
                        <li class="td td-item">
                            <div class="item-pic">
                                <a href="#" target="_blank" class="J_MakePoint" data-point="tbcart.8.12">
                                    <img :src="goods.imgUrl" style=" height: 80px"></a>
                            </div>
                            <div class="item-info">
                                <div class="item-basic-info">
                                    <a href="#" target="_blank" class="item-title J_MakePoint" data-point="tbcart.8.11">{{goods.goodsName}}</a>
                                </div>
                            </div>
                        </li>
                        <li class="td td-info">
                            <div class="item-props item-props-can">

                            </div>
                        </li>
                        <li class="td td-price">
                            <div class="item-price price-promo-promo">
                                <div class="price-content">
                                    <div class="price-line">
                                        <em class="J_Price price-now" tabindex="0">{{goods.price|showPrice}}</em>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-amount">
                            <div class="amount-wrapper ">
                                <div class="item-amount ">
                                    <div class="sl">
                                        <button class="min am-btn" @click="decrement(index)"
                                                v-bind:disabled="goods.goodsNumber <= 1">-
                                        </button>
                                        <input class="text_box" name="" type="text" :value="goods.goodsNumber"
                                               style="width:30px;"/>
                                        <button class="add am-btn" @click="increment(index)">+</button>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-sum">
                            <div class="td-inner">
                                <em tabindex="0"
                                    class="J_ItemSum number">{{goods.price*goods.goodsNumber|showPrice}}</em>
                            </div>
                        </li>
                        <li class="td td-op">
                            <div class="td-inner">
                                <button class="delete" @click="removeHandle(index,goods.id)">移除</button>
                            </div>

                        </li>
                    </ul>

                </div>


            </div>
        </tr>

    </div>
    <div class="clear"></div>
    <div class="float-bar-wrapper">
        <div id="J_SelectAll2" class="select-all J_SelectAll" v-show="!checkAllFlag">
            <div class="cart-checkbox">
                <input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox"
                       @click="checkAll(true)" :checked="false">
                <label for="J_SelectAllCbx2"></label>
            </div>
            <span id="allChecked"> 全选</span>
        </div>

        <div id="J_SelectAll3" class="select-all J_SelectAll" v-show="checkAllFlag">
            <div class="cart-checkbox">
                <input class="check-all check" id="J_SelectAllCbx3" name="select-all" value="true" type="checkbox"
                       @click="checkAll(false)">
                <label for="J_SelectAllCbx2"></label>
            </div>
            <span>取消</span>
        </div>

        <div class="float-bar-right">
            <div class="amount-sum">
                <span class="txt">已选商品</span>
                <em id="J_SelectedItemsCount"></em><span class="txt">{{checkNum}}件</span>
                <div class="arrow-box">
                    <span class="selected-items-arrow"></span>
                    <span class="arrow"></span>
                </div>
            </div>
            <div class="price-sum">
                <span class="txt">合计:</span>
                <strong class="price"><em id="J_Total">{{totalMoney|showPrice}}</em></strong>
            </div>
            <div class="btn-area">
                <a><span @click="toDo()">结&nbsp;算</span></a>
            </div>
        </div>

    </div>

    <div class="footer">
        <div class="footer-hd">
            <p>
                <b>|</b>
                <a href="http://localhost:80/views/view-api/home2.html">商城首页</a>
                <b>|</b>
                <a href="# ">支付宝</a>
                <b>|</b>
                <a href="# ">物流</a>
            </p>
        </div>
        <div class="footer-bd ">
            <p>
                <a href="# ">合作伙伴</a>
                <a href="# ">联系我们</a>
                <a href="# ">网站地图</a>
            </p>
        </div>
    </div>

</div>

<!--操作页面-->

</body>

</html>

<script type="text/javascript">
    $(function () {
        //登录才能进入
        judgeLogin();
        //登录之后显示 用户名
        OnDisplay();
    });


    const vue = new Vue({
        el: "#shop_cart",
        data: {
            goodsList: "",
            list: [],
            selectId: [],  //选中的商品id
            totalMoney: 0,  //总价
            checkNum: 0,  //选择的商品数量(结算需要显示的数量)
            checkAllFlag: false,  //是否全选
        },

        filters: {
            showPrice(price) {
                return '￥' + price.toFixed(2)
            }
        },
        //初始化购物车
        methods: {

            //结算
            toDo() {
                //获取用户id
                let userId = sessionStorage.id;
                let cartsList = [];
                let thisObj = this
                let goodsList1 = this._data.goodsList;
                if (this.checkNum === 0) {
                    alert('先选中需要结算的商品');
                    return
                } else {
                    //获取订单
                    goodsList1.forEach(item => {
                        if (item.checked) {
                            item.userId = parseInt(userId)
                            item.totalMoney = thisObj.totalMoney
                            item.checkNum = thisObj.checkNum
                            cartsList.push(item);
                        }
                    });
                }
                let url = "myCart/creatOrder"
                postWithJson(url, cartsList, function (data) {
                    //成功
                    window.location.href = "pay.html?id="+data
                })
            },

            //单选
            selectGoods(goods) {
                //判断是否未定义，如果没点击过按钮是没有注册的，则需要先注册checked属性
                if (typeof goods.checked == 'undefined') {
                    this.$set(goods, "checked", true);
                    this.checkNum++;  //结算需要显示的数量
                } else {
                    //  如果已经注册，则设置checked否(这里不能设置为false,因为当已经注册过之后再点击为flase，那么再点击一次则为true)
                    goods.checked = !goods.checked;
                    goods.checked ? this.checkNum++ : this.checkNum--;
                }
                // 求总价
                this.totalPrice();
                // 当所有的商品都选择的时候，自动默认为全选
                this.goodsList.length === this.checkNum ? this.checkAll(true) : this.checkAllFlag = false;
            },

            //全选
            checkAll(flag) {
                this.checkAllFlag = flag;
                let _this = this;
                let goodsList1 = this._data.goodsList;
                flag ? this.checkNum = goodsList1.length : this.checkNum = 0;
                goodsList1.forEach(function (item, index) {
                    if (typeof item.checked == 'undefined') {
                        _this.$set(item, "checked", _this.checkAllFlag);//通过set来给item添加属性checked
                    } else {
                        item.checked = _this.checkAllFlag;
                    }
                });
                this.totalPrice();
            },

            // 求总价
            totalPrice() {
                let goodsList1 = this._data.goodsList;
                let _this = this;
                this.totalMoney = 0;
                this.checkNum = 0;
                goodsList1.forEach(item => {
                    if (item.checked) {
                        let number = parseInt(item.goodsNumber);
                        _this.totalMoney += item.price * number
                        _this.checkNum += number
                    }
                });
            },

            //移除
            removeHandle(index, id) {
                this.goodsList.splice(index, 1)
                let url = "myCart/removeCarts"
                let params = {id:id}

                postWithParams(url,params,function () {
                    console.log("删除成功");
                })
                this.totalPrice();
            },

            //减少
            decrement(index) {
                this.goodsList[index].goodsNumber--
                this.totalPrice();
            },

            //增加
            increment(index) {
                this.goodsList[index].goodsNumber++
                this.totalPrice()
            },

            //初始化购物车
            initCarts: function () {
                let url = "myCart/initCart"
                let thisObj = this;
                // 根据session获取用户id
                let userId = sessionStorage.id;
                let params = {userId: userId}
                postWithParams(url, params, function (data) {
                    thisObj.goodsList = data

                })
                this.totalPrice()
            }


        },

        mounted: function () {
            //页面加载完成，并且vue对象加载完成之后调用
            this.initCarts();
        },

    })


    //为页面搜索功能实现功能
    //获取搜索按钮
    let topsearch = document.getElementById("ai-topsearch");
    //搜索按钮绑定点击事件
    topsearch.onclick = function () {
        let searchInput = document.getElementById("searchInput");
        let value = searchInput.value;
        //跳转到详情页,把id带过去
        let openUrl = "http://localhost:80/views/view-api/search.html";
        window.open(openUrl + "?" + value)

    }

</script>